<template>
  <view class="feedback-container">
    <image style="width: 100vw;height: 100vh;position: fixed;left: 0;top: 0;z-index: -1" src="/static/image/home_bg.png"></image>
    <view class="feedback-card">
      <view class="label">头像</view>
      <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
        <image v-if="imgUrl" :src="imgUrl" class="avatar" />
        <view v-else class="avatar-placeholder">
          <image src="/static/image/upload_img.png" class="avatar-icon" />
        </view>
      </button>
      <view class="label">昵称</view>
      <input type="nickname" class="weui-input" v-model="contact" placeholder="请输入昵称" @input="onNicknameInput" />
    </view>
    <button class="submit-btn" @click="submit">保存</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      imgUrl: '',
      contact: ''
    }
  },
  onLoad() {
    this.imgUrl = this.userInfo.avatar_url
    this.contact = this.userInfo.nickname
  },
  methods: {
    onChooseAvatar(e) {
      console.log('选择头像:', e);
      const { avatarUrl } = e.detail;
      this.imgUrl = avatarUrl;
    },
    onNicknameInput(e) {
      console.log('昵称输入:', e);
      this.contact = e.detail.value;
    },
    submit() {
      if (!this.userInfo.id) {
        uni.showModal({
          title: '提示',
          content: '是否登录？',
          // 文本颜色
          color: '#333333',
          // 取消按钮的文字颜色
          cancelColor: '#D43030',
          // 确认按钮的文字颜色
          confirmColor: '#333333',
          success: () => {
            uni.navigateTo({
              url: '/pages/login/login'
            })
          }
        })
        return
      }
      // if (!this.content) {
      //   uni.showToast({ title: '请输入反馈内容', icon: 'none' });
      //   return;
      // }
      // if (this.contact && !/^1[3456789]\d{9}$/.test(this.contact)) {
      //   uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
      //   return;
      // }
      if (!this.contact) {
        uni.showToast({ title: '请输入昵称', icon: 'none' });
        return;
      }
      uni.showLoading({
        title: '提交中...',
        mask: true
      })
      this.$api.updateUser(this.userInfo.id, {
          nickname: this.contact,
          avatar_url: this.imgUrl
      }).then(res => {
        setTimeout(() => {
          // 提交逻辑
          uni.showToast({ title: '提交成功', icon: 'success' });
        },500)
      })
    }
  }
}
</script>

<style lang="scss">
.feedback-container {
  min-height: 100vh;
  padding: 32rpx;
}
.feedback-card {
  width: 100%;
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
  box-shadow: 0 4rpx 8rpx  rgba(86, 109, 135,0.25);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .label {
    font-size: 28rpx;
    color: #000;
    font-weight: 400;
    margin-bottom: 24rpx;
    margin-top: 12rpx;
  }
  .input-area {
    width: 100%;
    box-sizing: border-box;
    min-height: 120rpx;
    background: #F7F7F7;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #333;
    padding: 18rpx 20rpx;
    margin-bottom: 18rpx;
    border: none;
    resize: none;
  }
  .avatar-wrapper {
    width: 200rpx;
    height: 200rpx;
    background: #F7F7F7;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18rpx;
    border: none;
    padding: 0;
    &::after {
      border: none !important;
    }
    .avatar-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .avatar-icon {
        width: 60rpx;
        height: 60rpx;
        opacity: 0.5;
      }
    }
    .avatar {
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
      object-fit: cover;
    }
  }
  .weui-input {
    width: 100%;
    height: 80rpx;
    background: #F7F7F7;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #333;
    padding: 0 20rpx;
    margin-bottom: 12rpx;
    border: none;
    box-sizing: border-box;
  }
  .desc {
    font-size: 28rpx;
    color: #666;
    line-height: 36rpx;
    margin-bottom: 0;
    margin-top: 12rpx;
  }
}
.submit-btn {
  width: 512rpx;
  margin: 120rpx auto 0 auto;
  height: 94rpx;
  background: #222;
  color: #fff;
  font-size: 32rpx;
  border-radius: 47rpx;
  text-align: center;
  line-height: 94rpx;
  border: none;
}
</style>
